{include file="common/head"}
<style>
	a {
		text-decoration: none;
	}

	.title {
		font-weight: bold;
	}

	input {
		display: initial !important;
	}

	#cats,
	#goods,
	#specs {
		position: absolute;
		width: 220px;
		left: 20px;
		top: 50px;
		background-color: #f7f7f7;
		border: 1px solid #ccc;
		box-shadow: 0px 0px 4px #ccc;
		padding: 4px;
		z-index: 20;
		display: none;
		max-height: 100%;
		overflow-y: scroll;
	}

	#goods {
		left: 244px;
	}

	#specs {
		left: 468px;
		display: none;
	}

	.cat_item,
	.goods_item,
	.specs_item {
		border: 1px solid #ccc;
		border-radius: 6px;
		margin: 4px;
		padding: 4px 10px;
		background-color: #fff;
		cursor: pointer;
		line-height: 24px;
	}

	.row {
		margin: 8px;
	}

	.chose {
		background-color: #f60;
	}
</style>
<link rel="stylesheet" href="/static/flatpickr/flatpickr.min.css">
<script src="/static/flatpickr/flatpickr.min.js"></script>
<title>客户订单录入</title>
</head>

<body>
	<div class="container-fluid">
		<!-- <form action="/index.php/order/order_add" method="post"> -->
		<div class="title" style="height:50px;line-height: 50px;padding:10px;" class="row">
			<div class="col-6">
				<h2>客户订单录入 Purcharse order</h2>
			</div>
			<div class="col text-right">

			</div>
		</div>

		<div class="row">
			<div id="customer_info" class="col-5" style="border:1px solid #ccc;">
				<div class="row">
					<div class="col-4 title">客户<br />Customer</div>
					<div class="col">
						<select id="customer_id" name="customer_id" class="form-control" placeholder="客户 Customer">
							<option value="">Please choose</option>
							{foreach $custs as $kv}
							<option value="{$kv['id']}">{$kv['name']}-{$kv['name2']}</option>
							{/foreach}
						</select>
					</div>
				</div>
				<div class="row">
					<div class="col-4 title">客户单号<br />Purcharse Order</div>
					<div class="col">
						<input type="text" id="customer_order_no" name="customer_order_no" class="form-control"
							placeholder="输入客户单号 Purcharse Order" />
					</div>
				</div>
				<div class="row">
					<div class="col-4 title">客户采购人<br />Purcharser</div>
					<div class="col">
						<input type="text" name="contact" id="contact" class="form-control"
							placeholder="客户采购人 Purcharser" />
					</div>
				</div>
				<div class="row">
					<div class="col-4 title">联系人手机<br />Purcharser mobile</div>
					<div class="col">
						<input type="text" id="mobile" name="mobile" class="form-control"
							placeholder="联系人手机 Purcharser mobile" />
					</div>
				</div>
				<div class="row">
					<div class="col-4 title">交货日期<br />Delivery date</div>
					<div class="col">
						<input type="text" id="delivery_date" name="delivery_date" class="form-control"
							placeholder="交货日期 Delivery date" />
					</div>
				</div>
				<div class="row">
					<div class="col-4 title">交货仓库<br />In stock#</div>
					<div class="col">
						<input type="text" id="in_stock" name="in_stock" class="form-control"
							placeholder="交货仓库 In stock#" />
					</div>
				</div>
				<div class="row">
					<div class="col-4 title">业务负责人<br />Sales contact</div>
					<div class="col">
						<select id="sales_id" name="sales_id" class="form-control" placeholder="业务负责人 Sales">
							<option value="">Please choose</option>
							{foreach $sales as $kv}
							<option value="{$kv['id']}">{$kv['name']}</option>
							{/foreach}
						</select>
					</div>
				</div>
				<div class="row">
					<div class="col-4 title">订单备注<br />Memo</div>
					<div class="col">
						<input type="text" id="memo" name="memo" class="form-control" placeholder="订单备注" />
					</div>
				</div>

				<div style="text-align: center;margin:10px;">
					<button type="button" id="order_submit" class="btn btn-primary ">提交订单submit</button>

				</div>
			</div>

			<div class="col-6" style="border:1px solid #ccc;margin-left:4px;box-shadow: 1px 1px 4px #666;padding:8px;">
				<table id="goods_list" class="table table-hover table-striped table-bordered">
					<tr class="table-info">
						<th>品名 Product name</th>
						<th>规格 Specs</th>
						<th>数量 Qty</th>
						<th>产品备注 memo</th>
						<th>
							<button type="button" class="btn btn-sm btn-primary" id="goods_add"><span
									class="bi-plus"></span></button>
						</th>
					</tr>
					<tr class="goods_row">
						<td colspan="5">没有产品...</td>

					</tr>
				</table>

			</div>
		</div>

		<!-- </form> -->
		<div id="cats" class="col">
			<div class="title text-center">产品分类</div>
			<div>
				{foreach $cats as $kv}
				<div class="cat_item" cat_id="{$kv['id']}" cat_name="{$kv['name']}">
					{if $kv['deepth']==2}|__{/if}
					{if $kv['deepth']==3}|_____{/if}
					{$kv['name']}
				</div>
				{/foreach}
			</div>
		</div>

		<div id="goods" class="col">
			<div class="title text-center">产品选择</div>
			<div>
				{foreach $goods as $kv}
				<div class="goods_item" cat_id="{$kv['cat_id']}" goods_id="{$kv['id']}" goods_name="{$kv['name']}">
					{$kv['name']}</div>
				{/foreach}
			</div>
		</div>

		<div id="specs" class="col">
			<div class="title text-center">规格选择</div>
			<div>
				{foreach $specs as $kv}
				<div class="specs_item" goods_id="{$kv['goods_id']}" id="{$kv['id']}" name="{$kv['name']}">
					{$kv['name']}
					<input type="checkbox" class='form-check-input' />
				</div>
				{/foreach}
			</div>
		</div>


		<div id="mask"></div>
	</div>
	<script>
		var goods_list = []
		var current_item = {};

		$(function () {
			flatpickr("#delivery_date", {});

			$("#goods_add").on('click', function () {
				$("#mask").show();
				$("#cats").show()
			});

			$("#mask").on('click', function () {
				$("#cats,#goods,#specs,#mask").fadeOut();

			});

			//分类选择
			$(".cat_item").on('click', function () {
				$("#specs").fadeOut();
				$(".cat_item").removeClass('chose');
				$(this).addClass('chose');

				current_item = { cat_id: $(this).attr('cat_id') };
				//console.log(current_item)
				if (current_item.cat_id == 1) {
					$(".goods_item").show();
				} else {
					$(".goods_item").hide().each(function () {
						//console.log($(this).attr('cat_id'))
						if ($(this).attr('cat_id') == current_item.cat_id) {
							$(this).show();
						}
					})
				}

				$("#goods").fadeIn();
			})

			//产品点击处理，显示下面的规格
			$(".goods_item").on('click', function () {
				$(".goods_item").removeClass('chose');
				$(this).addClass('chose');
				//current_item = { 'goods_id': $(this).attr('goods_id'), 'name': $(this).attr('goods_name') };
				current_item.goods_id = $(this).attr('goods_id');
				current_item.name = $(this).attr('goods_name');
				console.log(current_item);
				$(".specs_item").hide().each(function () {
					if ($(this).attr('goods_id') == current_item.goods_id) {
						$(this).show();
					}
				})
				$("#specs").fadeIn();
			})

			$(".specs_item").on('click', function () {
				$(".specs_item").removeClass('chose');
				$(this).addClass('chose');
			})

			//规格数量输入处理
			$("#goods_list").on('blur', "input", function (e) {
				var type = $(this).attr('name');
				var id = $(this).parents('tr').attr('id');
				var val = $(this).val();
				//就是处理产品数组对应规格的数量
				for (var i = 0; i < goods_list.length; i++) {
					if (type == 'qty') {
						if (isNaN(val) || val <= 0) {
							goods_list[i].qty = 0;
						}
						if (id == goods_list[i].id) {
							goods_list[i].qty = val;
						}
					} else {
						if (id == goods_list[i].id) {
							goods_list[i].memo = val;
						}
					}

				}
				refresh_goods();
				console.log(goods_list)
			})

			//删除产品
			$("#goods_list").on('click', '.btn-danger', function () {
				var id = $(this).parents('tr').attr('id');
				layer.confirm('是否删除?', ['yes', 'no'],
					function () {
						for (var i = 0; i < goods_list.length; i++) {
							console.log(id == goods_list[i].id)
							if (id == goods_list[i].id) {
								goods_list.splice(i, 1);
								break;
							}
						}
						refresh_goods();
						layer.msg('ok')

					},
					function () {
						layer.msg('ok')
					})


			})

			//规格选择处理，加入数组中，最后显示出来
			$(".specs_item input[type='checkbox']").on('click', function () {
				var el = $(this).parent();
				var specs = { id: el.attr('id'), name: el.attr('name'), goods_id: el.attr('goods_id'), goods_name: current_item.name, qty: 0, memo: '' }
				console.log(goods_list.length);

				var exist = 0;
				for (var i = 0; i < goods_list.length; i++) {
					if (goods_list[i].id == specs.id) {
						exist = 1;
						break;
					}
				}
				if (exist == 0) {
					goods_list.push(specs);
				}
				refresh_goods()
				console.log(goods_list);
			})

			$("#customer_info input,#customer_info select").on('focus', function () {
				$(this).css({ 'background-color': '#f90' });
			}).on('blur', function () {
				$(this).css({ 'background-color': '#fff' });
			})


			function order_submit() {
				var customer_id = $("#customer_id").val();
				var customer_order_no = $("#customer_order_no").val();
				var contact = $("#contact").val();
				var mobile = $("#mobile").val();
				var delivery_date = $("#delivery_date").val();
				var in_stock = $("#in_stock").val();
				var sales_id = $("#sales_id").val();

				var order = {};

				if (!goods_list.length) {
					layer.open({ content: "产品还未选择！" });
					return false;
				}

				for (var i = 0; i < goods_list.length; i++) {
					if (goods_list[i].qty == 0) {
						layer.open({ content: "某些产品还未输入数量！" });
						return false;
					}
				}

				$("#customer_info input,#customer_info select").each(function () {
					if (!$(this).val()) {
						layer.open({ content: $(this).attr('placeholder') + " 还未填写或选择！" });
						return false;
					}
				})

				order.customer_id = $("#customer_id").val();
				order.customer_order_no = $("#customer_order_no").val();
				order.contact = $("#contact").val();
				order.mobile = $("#mobile").val();
				order.delivery_date = $("#delivery_date").val();
				order.in_stock = $("#in_stock").val();
				order.sales_id = $("#sales_id").val();
				order.memo = $("#memo").val();
				order.goods = goods_list;

				//console.log(order);
				layer.confirm('是否确定提交订单？', ['确定', '再检查一下'], function () {
					$.post('/order/order_add', order, function (res) {
						if (res.code == 1) {
							layer.open({ 'content': '订单已保存！' });
							goods_list = [];
							current_item = {};
							refresh_goods();
						} else {
							layer.open({ content: res.msg });
						}
					})
				}, function () {
					layer.msg('yes!');
				})

			}

			$("#order_submit").on('click', function () {
				return order_submit();
			})

			$("#goods_list").on('focus', 'input', function () {
				$(this).css({ 'background-color': '#f90' });
			}).on('blur', function () {
				$(this).css({ 'background-color': '#fff' });
			})

			function refresh_goods() {
				$(".goods_row").remove();
				var str = '';
				for (var i = 0; i < goods_list.length; i++) {
					var tr = "<tr class='goods_row' id='" + goods_list[i].id + "'>";
					tr += "<td>" + goods_list[i].goods_name + "</td>";
					tr += "<td>" + goods_list[i].name + "</td>";
					tr += "<td><input type='number' class='form-control' name='qty' value='" + goods_list[i].qty + "' style='width:100px;' ></td>";
					tr += "<td><input type='text' class='form-control' name='memo' value='" + goods_list[i].memo + "' ></td>";
					tr += "<td><button type='button' class='btn btn-sm btn-danger'><span class='bi-x'></span></button></td>";
					tr + "</tr>";
					str += tr;
				}
				$("#goods_list tr").after(str)
			}
		})

	</script>
</body>

</html>